<template>
    <div style="float: left;">
        <el-row>
            <el-col>
                <VueEcharts style="height:400px;width: 600px;" :option="bar_option"></VueEcharts>
            </el-col>

        </el-row>
    </div>
    <div>
        <el-row>
            <el-col>
                <VueEcharts style="height:400px;width: 600px;" :option="bar_options"></VueEcharts>
            </el-col>

        </el-row>
    </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, inject, watch } from 'vue'
import axios from 'axios'
import "echarts"
import VueEcharts from "vue-echarts"
const datas = ref<{ documentTime: any; collection: any }[]>([]);
const data = ref<{ document_date: any; purchase_decimal: any }[]>([]);
onMounted(() => {
    changeSales()
    changePurchase()
})

//柱状图
const bar_option = ref({})

watch(datas, (newValue) => {
    let xData: any[] = []
    let yData: any[] = []


    newValue.forEach((item) => {

        xData.push(item.documentTime)
        yData.push(item.collection)


    })


    bar_option.value = {
        legend: {},
        tooltip: {},
        title: {
            text: '销售统计'
        },

        xAxis: {
            type: 'category',
            data: xData
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: yData,
                type: 'bar'
            }
        ]
    };


})
const changeSales = () => {
    axios.get("http://localhost:5184/SalesData/GetSalesCount").then(res => {

        datas.value = res.data
        console.log(datas.value)
    })

}



//柱状图
const bar_options = ref({})

watch(data, (newValue) => {
    let xData: any[] = []
    let yData: any[] = []


    newValue.forEach((item) => {

        xData.push(item.document_date)
        yData.push(item.purchase_decimal)


    })


    bar_options.value = {
        legend: {},
        tooltip: {},
        title: {
            text: '采购统计'
        },

        xAxis: {
            type: 'category',
            data: xData
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: yData,
                type: 'bar'
            }
        ]
    };


})
const changePurchase = () => {
    axios.get("http://localhost:5184/SalesData/GetPurchaseCount").then(res => {

        data.value = res.data
        console.log(datas.value)
    })

}


</script>